<template>
  <div>
    <el-container>
      <el-header>
        <el-row
          ><el-col :span="2"> 销售机会管理 </el-col
          ><el-col :span="6" :offset="13"> 创建和维护销售机会 </el-col></el-row
        >
      </el-header>
      <el-main>
        <el-button
          icon="el-icon-plus"
          @click="dialogVisibleinsert = true"
          circle
        ></el-button>
        <el-table :data="tableData" style="width: 100%" border stripe>
          <el-table-column
            prop="ChanName"
            label="客户名称"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ChanTitle"
            label="概要"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ChanLinkMan"
            label="联系人"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ChanLinkTel"
            label="联系电话"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ChanCreateDate"
            label="创建时间"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ operatingTime(scope.row.ChanCreateDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="cz(scope.row)"
                >编辑</el-button
              >
              <el-button size="mini" type="danger" @click="delt(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <el-col :span="1">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="rows"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-dialog
      title="销售机会添加"
      :visible.sync="dialogVisibleinsert"
      width="50%"
    >
      <el-form
        ref="forminsert"
        :model="forminsert"
        :rules="formruleinsert"
        label-width="80px"
      >
        <el-form-item label="客户名称" prop="ChanName">
          <el-input v-model="forminsert.ChanName"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="ChanLinkMan">
          <el-input v-model="forminsert.ChanLinkMan"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="ChanLinkTel">
          <el-input v-model="forminsert.ChanLinkTel"></el-input>
        </el-form-item>
        <el-form-item label="成功几率" prop="ChanRate">
          <el-select
            v-model="forminsert.ChanRate"
            placeholder="请选择成功几率"
            style="width: 100%"
          >
            <el-option label="0%" value="0"></el-option>
            <el-option label="50%" value="50"></el-option>
            <el-option label="100%" value="100"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="概要" prop="ChanTitle">
          <el-input v-model="forminsert.ChanTitle"></el-input>
        </el-form-item>
        <el-form-item label="机会描述" prop="ChanDesc">
          <el-input type="textarea" v-model="forminsert.ChanDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleinsert = false">取 消</el-button>
        <el-button type="primary" @click="insert('forminsert')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="修改操作" :visible.sync="dialogVisibleUpdate" width="50%">
      <el-form
        ref="formUpdate"
        :model="formUpdate"
        :rules="formruleUpdate"
        label-width="80px"
      >
        <el-form-item label="客户名称" prop="ChanName">
          <el-input v-model="formUpdate.ChanName"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="ChanLinkMan">
          <el-input v-model="formUpdate.ChanLinkMan"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="ChanLinkTel">
          <el-input v-model="formUpdate.ChanLinkTel"></el-input>
        </el-form-item>
        <el-form-item label="成功几率" prop="ChanRate">
          <el-select
            v-model="formUpdate.ChanRate"
            placeholder="请选择成功几率"
            style="width: 100%"
          >
            <el-option label="0%" value="0"></el-option>
            <el-option label="50%" value="50"></el-option>
            <el-option label="100%" value="100"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="概要" prop="ChanTitle">
          <el-input v-model="formUpdate.ChanTitle"></el-input>
        </el-form-item>
        <el-form-item label="机会描述" prop="ChanDesc">
          <el-input type="textarea" v-model="formUpdate.ChanDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
        <el-button type="primary" @click="update('formUpdate')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { feye, inser, upda, dele } from "../http/user.js";
import qs from "qs";
export default {
  data() {
    return {
      //每页显示数
      pageSize: 3,
      //当前页
      currentPage: 1,
      //总行数
      rows: 1,
      tableData: [],
      dialogVisibleinsert: false,
      dialogVisibleUpdate: false,
      formUpdate: {
        ChanID: "",
        ChanName: "",
        ChanLinkMan: "",
        ChanLinkTel: "",
        ChanRate: "",
        ChanTitle: "",
        ChanDesc: "",
        ChanCreateMan: "",
      },
      formruleUpdate: {
        ChanName: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        ChanLinkMan: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
        ],
        ChanLinkTel: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
        ],
        ChanRate: [
          { required: true, message: "请输选择成功几率", trigger: "blur" },
        ],
        ChanTitle: [{ required: true, message: "请输入概要", trigger: "blur" }],
        ChanDesc: [
          { required: true, message: "请输入机会描述", trigger: "blur" },
        ],
      },
      forminsert: {
        ChanName: "",
        ChanLinkMan: "",
        ChanLinkTel: "",
        ChanRate: "",
        ChanTitle: "",
        ChanDesc: "",
        ChanCreateMan: "",
      },
      formruleinsert: {
        ChanName: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        ChanLinkMan: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
        ],
        ChanLinkTel: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
        ],
        ChanRate: [
          { required: true, message: "请输选择成功几率", trigger: "blur" },
        ],
        ChanTitle: [{ required: true, message: "请输入概要", trigger: "blur" }],
        ChanDesc: [
          { required: true, message: "请输入机会描述", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    operatingTime(timeDate) {
      return this.$moment(timeDate).format("YYYY-MM-DD");
    },
    sx() {
      feye({
        params: {
          i: this.currentPage,
          j: this.pageSize,
        },
      })
        .then((res) => {
          console.info(res);
          this.tableData = res.Data;
          this.rows = res.Row;
        })
        .catch((err) => {
          console.info(err);
        });
    },
    handleSizeChange: function (val) {
      this.pageSize = val;
      this.sx();
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.sx();
    },
    insert(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          inser(qs.stringify(this.forminsert))
            .then((res) => {
              if (res.Message == "添加数据成功") {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.sx();
                this.dialogVisibleinsert = false;
              }
            })
            .catch((err) => {
              console.info(err);
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "error",
          });
          return false;
        }
      });
    },
    delt(row) {
      if (confirm("确定删除吗")) {
        dele({
          params: {
            id: row.ChanID,
          },
        })
          .then((res) => {
            if (res.Data == 1) {
              this.$message({
                message: "恭喜你，删除成功",
                type: "success",
              });
              feye({
                params: {
                  i: this.currentPage,
                  j: this.pageSize,
                },
              })
                .then((res) => {
                  console.log(res);
                  if (res.Data == "") {
                    console.log(2);
                    this.currentPage = this.currentPage - 1;
                    this.sx();
                  } else {
                    this.sx();
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            }
          })
          .catch((err) => {
            console.info(err);
          });
      }
    },
    update(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          upda(qs.stringify(this.formUpdate))
            .then((res) => {
              if (res.Data == 1) {
                this.$message({
                  message: "恭喜你，修改成功",
                  type: "success",
                });
                this.dialogVisibleUpdate = false;
                this.sx();
              }
            })
            .catch((err) => {
              console.info(err);
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "error",
          });
          return false;
        }
      });
    },
    cz(row) {
      this.formUpdate.ChanCreateMan = row.ChanCreateMan;
      this.formUpdate.ChanID = row.ChanID;
      this.formUpdate.ChanName = row.ChanName;
      this.formUpdate.ChanLinkMan = row.ChanLinkMan;
      this.formUpdate.ChanLinkTel = row.ChanLinkTel;
      this.formUpdate.ChanRate = row.ChanRate + "%";
      this.formUpdate.ChanTitle = row.ChanTitle;
      this.formUpdate.ChanDesc = row.ChanDesc;
      this.dialogVisibleUpdate = true;
    },
  },
  mounted() {
    this.sx();
    this.forminsert.ChanCreateMan = this.$store.state.UserID;
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  border-radius: 15px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  border: solid 5px white;
  padding: 20px;
  margin-top: 20px;
  border-radius: 20px;
}
.el-col-2 {
  width: 8.33333%;
  font-size: 17px;
  font-weight: 900;
}
.el-col-6 {
  width: 37.5%;
  font-size: 1px;
  font-weight: 300;
  color: rgb(83, 83, 83);
}
element.style {
  height: 100%;
  width: 1239px;
}
.el-button.is-circle {
  border-radius: 50%;
  padding: 12px;
  position: relative;
  top: -10px;
  right: -570px;
}
</style>